<template>
  <header class="header" :style="{ marginTop: notice ? '40px' : '0' }">
    <t-head-menu>
      <template #logo>
        <img
          v-lazy="logoSrc"
          alt="logo"
          style="margin: 0 !important; cursor: pointer; height: 40px"
          @click="goHome"
        />
      </template>
      <div class="menu-items">
        <t-menu-item
          class="menu-item"
          v-for="title in headerMenu"
          :key="title.text"
          :value="title.text"
          @click="changeMenu(title)"
        >
          {{ title.text }}
        </t-menu-item>
      </div>
      <template #operations>
        <ThemeSwitcher />
        <t-dropdown trigger="click" class="header-dorpdown-items" placement="bottom">
          <div class="avatar-wrapper">
            <span class="main-user-icon">
              <template v-if="!isLoggedIn">
                <div class="avatar-img">
                  <UserIcon class="img-icon" />
                </div>
              </template>
              <template v-else>
                <template v-if="userImg">
                  <div class="avatar-img">
                    <img v-lazy="userImg" alt="头像" class="image-avatar" />
                  </div>
                </template>
                <template v-else>
                  <div class="avatar-img">
                    <t-avatar class="image-avatar">{{ userName }}</t-avatar>
                  </div>
                </template>
              </template>
            </span>
          </div>
          <t-dropdown-menu slot="dropdown">
            <t-dropdown-item
              v-for="(menu, index) in userList"
              :key="index"
              :value="menu"
              @click="changeMenu(menu)"
              :drivider="true"
            >
              <div class="main-menu-box">
                <v-icon
                  :name="menu.icon"
                  style="
                    color: var(--menu-icon-color);
                    margin-right: 12px;
                    width: 16px;
                    height: 16px;
                  "
                />
                <span class="main-menu-text" style="color: var(--text-bg-color)">{{
                  menu.text
                }}</span>
              </div>
            </t-dropdown-item>
          </t-dropdown-menu>
        </t-dropdown>
      </template>
    </t-head-menu>
  </header>
</template>

<script setup>
import { useRouter, useRoute } from 'vue-router'
import { useUserStore, useThemeStore, useNoticeStore } from '@/store'
import { computed, reactive, ref } from 'vue'
import { UserIcon } from 'tdesign-icons-vue-next'

const darkLogo = 'https://static.pluse.vip/assets/logo-dark.png'
const lightLogo = 'https://static.pluse.vip/assets/logo.png'
const userStore = useUserStore()
const themeStore = useThemeStore()
const noticeStore = useNoticeStore()
const router = useRouter()
const route = useRoute()
const menuList = reactive([
  {
    text: '登录',
    select: false,
    icon: 'denglu',
    url: '/login'
  },
  {
    text: '首页',
    select: true,
    icon: 'shouye',
    url: '/'
  },
  {
    text: '推广',
    select: false,
    icon: 'tuiguangguanli',
    url: '/promotion'
  },
  {
    text: '帮助',
    select: false,
    icon: 'bangzhu',
    url: '/help'
  },
  {
    text: '关于',
    select: false,
    icon: 'guanyu',
    url: '/about'
  },
  {
    text: '订单',
    select: false,
    icon: 'jinbi',
    url: '/order'
  },
  {
    text: '个人',
    select: false,
    icon: 'wode',
    url: '/info'
  },
  {
    text: '退出',
    icon: 'tuichu1',
    select: false
  }
])

// 使用计算属性更新值
const notice = computed(() => noticeStore.noticeVisible)
const isDarkMode = computed(() => {
  // 假设你有一个 `themeStore` 状态管理模块，
  // 并且 `mode` 属性表示当前主题模式。
  return themeStore.mode === 'dark'
})

const goHome = () => {
  router.push('/')
}

const logoSrc = computed(() => {
  return isDarkMode.value ? darkLogo : lightLogo
})
const headerMenu = computed(() => {
  // 假设您使用 Vuex 来管理用户信息，其登录状态保存在 state.userInfo 中
  const loggedIn = !!userStore.isLoggedIn

  return menuList
    .filter(item => {
      return (
        ['首页', '推广', '帮助', '关于', '登录'].includes(item.text) &&
        (item.text !== '登录' || !loggedIn)
      )
    })
    .sort((a, b) => {
      if (a.text === '登录') {
        return 1
      } else if (b.text === '登录') {
        return -1
      } else {
        return 0
      }
    })
})

const changeMenu = menu => {
  if (route.fullPath === menu.url) {
    return
  }
  if (menu.text === '退出') {
    userStore.logOut()
    if (route.path !== '/') {
      router.push('/')
    }
    return
  }

  if (menu.text === '首页') {
    router.push(menu.url)
    return
  }
  if (menu.text === '登录') {
    router.push(menu.url)
    return
  }
  menuList.forEach(e => {
    e.select = false
  })
  // 找到需要选中的元素，并将其 select 属性设为 true
  const selectedMenu = menuList.find(item => item.text === menu.text)
  selectedMenu.select = true

  router.push(menu.url)
}
const userInfo = ref(userStore.userInfo)

watch(() => userStore.userInfo, (newVal) => {
  userInfo.value = newVal
})

const userList = computed(() => {
  if (!userStore.isLoggedIn) {
    return menuList
      .filter(item => ['首页', '推广', '帮助', '关于', '登录'].includes(item.text))
      .sort((a, b) => (a.text === '登录' ? -1 : b.text === '登录' ? 1 : 0))
  } else {
    const orderMap = {
      首页: 0,
      个人: 1,
      推广: 2,
      订单: 3,
      帮助: 4,
      关于: 5,
      退出: 6
    }
    return menuList
      .filter(item => item.text !== '登录')
      .sort((a, b) => orderMap[a.text] - orderMap[b.text])
  }
})

const userImg = computed(() => {
  if (userInfo.value) {
    if (typeof userInfo.value === 'string') {
      let userInfoParsed = JSON.parse(userInfo.value)
      return userInfoParsed.avatar
    } else {
      return userInfo.value.avatar
    }
  }
})
const isLoggedIn = computed(() => userStore.isLoggedIn)
const userName = computed(() => {
  if (userInfo.value) {
    if (typeof userInfo.value === 'string') {
      let userInfoParsed = JSON.parse(userInfo.value)
      return userInfoParsed.name.substring(0, 2)
    } else {
      return userInfo.value.name.substring(0, 2)
    }
  }
})
</script>
<style src="./index.css"></style>
